<template>
	<view class="store-container">
		<map style="width: 100%; height: 480upx;" @tap='changeMap' :latitude="shopMessage.lat" :longitude="shopMessage.lng" :markers="covers"
		 :clickable="true">
		</map>
		<view class="store-content">
			<view style="height: 250rpx;">
				<view  class="store-img-cont">
					<image class="store-img" :src="shopMessage.shavatar" lazy-load="true" mode="aspectFill"></image>
				</view>
				<view class="msg-content">
					<text style="font-weight: bold;font-size: 35rpx;">{{shopMessage.shname}}</text>
					<view class="store-location">
						<image src="/static/store-detail/location.png" lazy-load="true" mode="aspectFill"></image>
						<text>{{shopMessage.addres}}</text>
						<text class="active-distance">{{shopMessage.places}}</text>
					</view>
					<text style="font-size: 20upx;margin-left: 30upx; color: #666;">营业时间：{{shopMessage.workstarttime}}-{{shopMessage.workendtime}}</text>
					<view class="propaganda">
						<image src="/static/store-detail/message.png" mode="aspectFill"></image>
						<text>{{shopMessage.shopdesc}}</text>
					</view>
				</view>
				<view class="msg-cont-right" v-if="shopInfo.whetherUser == false">
					<button @click="onButton" :class="['button',{buttonActive: buttonFlag}]">{{attention}}</button>
				</view>
			</view>
			
			<view class="sc-title">
				<view :class="['t-item',{'t-item-active': titleId == 0}]" @click="onTitle(0)">
					<text class="iconfont">&#xe604;</text>环境
				</view>
				<view :class="['t-item',{'t-item-active': titleId == 1}]" @click="onTitle(1)">
					<text class="iconfont">&#xe620;</text>认证
				</view>
				<view :class="['t-item',{'t-item-active': titleId == 2}]" @click="onTitle(2)">
					<text class="iconfont">&#xe60b;</text>电话
				</view>
				<!-- <view :class="['t-item',{'t-item-active': titleId == 3}]" @click="onTitle(3)">
					<text class="iconfont">&#xe667;</text>分享
				</view> -->
			</view>
			
			<view class="sc-content" v-show="contentId == 0">
				<view class="sur">
					<block v-for="(item,index) in surContent" :key="index">
						<image class="img" :src="item" mode="aspectFill"></image>
					</block>
				</view>
			</view>
			
			<view class="sc-content" v-show="contentId == 1">
				<view class="sur">
					<block v-for="(item,index) in approveContent" :key="index">
						<image class="img" :src="item" mode="aspectFill"></image>
					</block>
				</view>
			</view>
			
			<view class="sc-content" v-show="contentId == 2">
				<view class="phone">
					<view>
						是否拨打电话？
					</view>
						<view class="ph-item" @click="onMake(shopMessage.phone)">
							{{shopMessage.phone}}
						</view>
				</view>
			</view>
			
			<view class="sc-content" v-show="contentId == 3">
				<view class="phone">
					<view class="">
						分享
					</view>
				</view>
			</view>
			
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				long: '',
				lat: '',
				shopMessage: {}, // 店铺信息
				titleId: 0, // 标题ID
				contentId: 0, // 内容ID
				attention: '+关注', // 关注
				buttonFlag: 0, // 是否关注
				shid: '',
				shopInfo:{},
			};
		},
		onLoad(item) {
			let row = JSON.parse(item.item)
			console.log(row)
			this.shopInfo = row
			// this.shid = option.shid;
			this.getShopMessage(this.shopInfo.shid);
		},
		computed: {
			approveContent() { // 认证图片
				return this.shopMessage.authimg;
			},
			surContent() { // 环境内容
				return this.shopMessage.envirimg;
			},
			covers () {
				let a = [{
					latitude: this.shopMessage.lat,
					longitude: this.shopMessage.lng,
					iconPath: '/static/imgs/shopDetails/btn_02.png',
					//文本气泡样式  图片加不进去
					callout:{
						content: this.shopMessage.addres_detail,//文本
						color:'#333333',//文本颜色
						fontSize:12,
						anchorX:0,//label的坐标，原点是 marker 对应的经纬度
						anchorY:0,//label的坐标，原点是 marker 对应的经纬度 
						bgColor:'#ffffff',//背景色
						padding:5,//文本边缘留白
						borderWidth:1,//边框宽度
						// borderColor:'#D84C29',//边框颜色							
						textAlign:'conter',//文本对齐方式。
						borderRadius:5,
						display: 'ALWAYS' // 此属性iOS不常显
					},
				}]
				return a
			}
		},
		methods: {
			changeMap(e){ // 点击地图
				// console.log(e)
			},
			async onButton() { // 关注的操作
				if(!this.buttonFlag) { // 去关注的
					let a = await this.$http.setShopFollow({shid: this.shopMessage.shid});
					if(a.code == 200) {
						uni.showToast({
							title: a.message,
							icon: 'none'
						})
						this.buttonFlag = !this.buttonFlag;
						this.attention = '已关注';
						return
					}
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
					return
				}
				// 取消关注的
				let a = await this.$http.setNotShopFollow({shid: this.shopMessage.shid});
				if(a.code == 200) {
					uni.showToast({
						title: a.message,
						icon: 'none'
					})
					this.buttonFlag = 0;
					this.attention = '+关注';
					return
				}
				uni.showToast({
					title: a.message,
					icon: 'none'
				})
			},
			onMake(phone) { // 拨打电话
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			onTitle(id){ // tab的切换
				this.contentId = id;
				this.titleId = id;
			},
			async getShopMessage(id) { // 获取数据
				let aa = uni.getStorageSync('lph-ll');
				console.log(id);
				let a = await this.$http.getShopMessage({lng: aa.long,lat: aa.lat, shid: id});
				this.shopMessage = a.data;
				this.buttonFlag = a.data.is_attention;
				if(a.data.is_attention) { // 处理是否关注
					this.attention = '已关注';
					return
				}
				this.attention = '+关注';
			},
		}
	}
</script>

<style lang="scss" scoped>
@import 'static/css/myStore.scss';
.store-container{
	background: #fff;
	.map-img{
		width: 100%;
		height: 1260rpx;
	}
	
	.store-content{
		width: 100%;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		
		.store-img-cont{
			float: left;
			display: inline-block;
			margin: 60rpx 20rpx 0 24rpx;
			border: 1px solid #ccc;
			border-radius: 10rpx;
		}
		.store-img{
			width: 82rpx;
			height: 82rpx;
		}
		.msg-content{
			display: inline-block;
			padding-top: 40rpx;
			
			.store-location{
				color: #333;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				text{
					font-size: 22rpx;
				}
				.active-distance{
					margin-left: 16rpx;
					font-size: 26rpx;
					color: rgb(255,85,125);
				}
			}
			.propaganda{
				image{
					width: 36rpx;
					height: 36rpx;
					margin-right: 4rpx;
				}
				text{
					font-weight: bold;
					font-size: 28rpx;
					color: rgb(255,85,125);
				}
			}
		}
		.msg-cont-right{
			float: right;
			margin-right: 24rpx;
			margin-top: 70rpx;
			.button{
				margin-top: 40rpx;
				font-size: 26rpx;
				width: 140rpx;
				height: 50rpx;
				line-height: 50rpx;
				color: #fff;
				background: rgb(255,85,125);
				text-align: center;
				border-radius: 40rpx;
			}
			.buttonActive{
				border: 2upx solid $bg02;
				background-color: #fff;
				color: $bg02;
			}
			text{
				display: inline-block;
				margin-top: 40rpx;
				font-size: 26rpx;
				width: 140rpx;
				height: 50rpx;
				line-height: 50rpx;
				color: #fff;
				background: rgb(255,85,125);
				text-align: center;
				border-radius: 40rpx;
			}
		}
	}
}
.swiper-item{
	text-align: center;
	
	image{
		margin-top: 40rpx;
	}
	.phone-item-cont{
		width: 100%;
		height: 400rpx;
		background: rgb(250,242,245);
		color: #666666;
		font-size: 32rpx;
	}
	.high-content{
		height: 80rpx;
		line-height: 80rpx;
		background: #fff;
		margin: 10rpx 40rpx;
		border-radius: 4rpx;
	}
	.number-style{
		color:  rgb(255,85,125);
		font-size: 36rpx;
	}
}
.sort2{
	background-color: #FFFFFF;
	display: flex;
	height: 72upx;
	line-height: 70upx;
	position: relative;
	margin-top: 20rpx;
	.scroll2{
		display: flex;
		width: 100%;
		flex-wrap: nowrap;
		padding: 0 24rpx;
	}
	.sort-item{
		flex: 1;
		// min-width: 128upx;
		max-width: 210rpx;
		font-size: 28upx;
		color: #666;
		text-align: center;
		position: relative;
		overflow: hidden;
		
		.sort-item-img{
			width: 36rpx;
			height: 36rpx;
			margin-right: 4rpx;
		}
	}
	.sort-active{
		
		font-size: 28upx;
		color: #ff557d;
		}
		.sort-active::after{
				content: '';
				width: 48rpx;
				height: 4upx;
				border-radius: 2upx;
				background-color: #ff557d;
				position: absolute;
				// left: 30upx;
				right: 44rpx;
				bottom: 10upx;

			}
	.sort-more{
		color: #b4b4b4;
	}
}
</style>